<template>
    <div class="ban_warpper">
        <div class="banner">
          <img @click="handleGayClick()" class="ban_img" src="//img1.qunarzz.com/sight/p0/1505/18/18ffcca94b1b7ca2.water.jpg_600x330_cd78f1b7.jpg" alt="">
          <div class="ban_jtou" @click="handleJtouClick">
              <span class="iconfont icon-zuojiantou"></span>
          </div>
          <div class="ban_bot">
              <div class="ban_shul">
                <span class="iconfont icon-diqiu"></span>
                <span>72</span>
              </div>
              <h4>长恨歌</h4>
          </div>
        </div>
        <common-fade>
          <common-gay @closeSwiper="closeGallary()" v-show="this.showGallary"></common-gay>
        </common-fade>
    </div>
</template>

<script>
  //使用画廊组件
    import CommonGay from '@/common/gallary/gallary'
    import CommonFade from '@/common/fade/Fade'
    export default {
        name: "banner",
      data(){
          return{
            showGallary:false
          }
      },
        methods:{
          handleJtouClick(){
            this.$router.push("/");//编程式路由
          },
          handleGayClick(){
            this.showGallary = true;
          },
          closeGallary(){
            this.showGallary =false;
          }
        },
      components:{
        CommonGay,
        CommonFade
      }
    }
</script>

<style scoped lang="stylus">
    .banner{
      height:0;
      padding-bottom:55%;
      position: relative;
      .ban_img{
          width:100%;
        }
      .ban_jtou{
          width:.36rem;
          line-height:.36rem;
          background:black;
          opacity:.5;
          border-radius:50%;
          position :absolute;
          top:.1rem;
          left :.1rem;
          text-align :center;

          span{
            color:white;
            font-size:.25rem;
          }
        }
        .ban_bot{
          position :absolute;
          bottom:.05rem;
          left:.1rem;
          color :white;
          h4{
            font-size:.2rem;
            margin:.05rem 0;
          }
        }
    }
</style>
